@import '../../../themes/basic/base-all.less';

ti-date-dominator {
  --ti-date-dominator-container-height: 26px;
  --ti-date-icon-width: 35px;
}

/* 时间日期显示框的样式 */
.ti3-date-dominator-container {
  display: inline-block;
  height: var(--ti-date-dominator-container-height);
  width: calc(100% + 2 * var(--ti-common-border-weight-normal));
  margin: 0 calc(-1 * var(--ti-common-border-weight-normal));
  vertical-align: middle;
  line-height: normal;
  position: relative;
  color: var(--ti-common-color-text-primary);
  border-left: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) transparent;
  border-right: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) transparent;
  cursor: pointer;
  .box-sizing(border-box);
  &:focus {
    outline: none;
  }

  // 日期显示文本样式
  & .ti3-date-show {
    display: inline-block;
    position: absolute;
    left: 0;
    height: 100%;
    line-height: var(--ti-date-dominator-container-height);
    font-size: var(--ti-common-font-size-base);
    font-weight: var(--ti-common-font-weight-4);
    width: calc(100% - var(--ti-date-icon-width));
    text-align: left;
    vertical-align: inherit;
    background-color: transparent;
    padding-left: var(--ti-common-space-10);
    .box-sizing(border-box);
    .user-select();

    &:before {
      content: '';
      display: inline-block;
      height: 100%;
      line-height: 100%;
      vertical-align: middle;
    }
  }

  // placeholder 样式
  & .ti3-date-placeholder-container {
    color: var(--ti-common-color-text-disabled);
    width: calc(100% - var(--ti-date-icon-width));
    font-size: var(--ti-common-font-size-base);
    font-weight: var(--ti-common-font-weight-4);
  }

  // 时间日期图标样式
  & .ti3-date-icon-container {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    left: calc(100% - var(--ti-date-icon-width));
    font-size: var(--ti-common-size-4x);
    width: var(--ti-date-icon-width);
    color: var(--ti-common-color-icon-normal);
    text-align: right;
    padding: var(--ti-common-space-0) var(--ti-common-space-10);
    line-height: var(--ti-date-dominator-container-height);
    cursor: pointer;
    .box-sizing(border-box);

    &:before {
      position: relative;
      top: calc(50% - var(--ti-common-size-4x) / 2);
    }
  }
}

// 非禁用状态的样式：hover,focus
.ti3-date-dominator-container:not([disabled]) {
  & .ti3-date-icon-container:hover {
    color: var(--ti-common-color-icon-hover);
  }
}

// 禁用状态样式
.ti3-date-dominator-container[disabled] {
  cursor: not-allowed;
  color: var(--ti-common-color-text-disabled);
  & .ti3-date-icon-container {
    color: var(--ti-common-color-icon-disabled);
    cursor: not-allowed;
  }
}

.ti3-date-icon-container.ti3-icon-close {
  font-size: var(--ti-common-size-3x);
}
